Skip to content

fix(desktop): reflow narrow trace turn headers - #3612

Merged
Astro-Han merged 2 commits into
apache:mainfrom
ARE404:codex/fix-trace-panel-narrow-layout
Aug 23, 2026
Merged

fix(desktop): reflow narrow trace turn headers#3612
Astro-Han merged 2 commits into
apache:mainfrom
ARE404:codex/fix-trace-panel-narrow-layout

Conversation

@ARE404

@ARE404 ARE404 commented Aug 23, 2026

Copy link
Copy Markdown
Contributor

Summary

  • reflow Trace turn headers based on the inspector container width
  • keep failure phrases intact instead of breaking one character per line
  • add a 320px Storybook regression story with geometry and overflow assertions

Verification

  • npx biome check apps/desktop/src/renderer/styles/workbar/inspector.css apps/desktop/stories/session-workbar.stories.tsx
  • npm --workspace @maka/desktop run typecheck:stories
  • rendered Storybook at 320px, 480px, and 600px in English and Chinese
  • confirmed zero horizontal overflow; 320/480px use two rows, while 600px remains one row
image

@ARE404
ARE404 marked this pull request as ready for review August 23, 2026 13:01

@Astro-Han Astro-Han left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed at exact head 06b901d246211974df8fa9800386f09f0fd5ee90. Nobody had reviewed this PR before, so this is a full review rather than an incremental one.

Coverage: the container-query reflow and its threshold, the overflow-wrap: anywherewhite-space: nowrap swap on the failure phrase, and whether the new story actually constrains what it claims. Not covered: visual/aesthetic judgement, and locales beyond the two in conversation-copy.ts.

No P0–P3.

The one thing worth checking here was the unconditional white-space: nowrap on .maka-inspector-turn-failure. Replacing overflow-wrap: anywhere with nowrap removes a containment fallback, and the container query only restores a safe layout at or below 32rem — so if the failure text were unbounded, widths above the threshold would overflow horizontally where they previously wrapped.

It isn't unbounded. turnFailure resolves against the closed EN_TURN_FAILURE / ZH_TURN_FAILURE maps with a short default for unknown codes, so the longest phrase either locale can produce is Model call failed / 模型调用失败. With SESSION_WORKBAR_MIN_WIDTH = 320 and SESSION_WORKBAR_MAX_WIDTH = 600, the band left to the one-line flex layout is roughly 512–600px of workbar width, and label + failure + meta fit that comfortably in both locales. The swap is safe because the content is enumerated, not because nowrap is generally safe here — worth remembering if a raw provider message is ever routed into this span.

Choosing container: maka-inspector / inline-size on the scroll area rather than a viewport media query is the right lever, and the comment gives the reason: the workbar resizes independently of the window and the same panel also has a bottom placement, so window width is not the quantity that decides whether the head line fits.

The new story is a real constraint rather than a mirror of the implementation. It asserts geometry — failure below the label, failure and meta sharing a row within 1px, and turn.scrollWidth <= turn.clientWidth — so deleting the container query would fail it on the containment assertion, not on a selector. It also drives the actual 320px floor via width={320} instead of a synthetic viewport.

Gate state: exact-head test is completed/success, and I confirmed the Storybook steps ran rather than being skipped in that job — Build Storybook and Storybook smoke are both completed/success at this head, so the new play assertion is hosted-verified and not only locally verified. mergeable is true; blocked is the missing review, which this resolves.

Approving.

@Astro-Han
Astro-Han merged commit 8b2d0eb into apache:main Aug 23, 2026
1 check passed
@ARE404
ARE404 deleted the codex/fix-trace-panel-narrow-layout branch August 23, 2026 16:59
mikemikimike pushed a commit to mikemikimike/maka that referenced this pull request Aug 23, 2026
* fix(desktop): reflow narrow trace turn headers

* test(desktop): preserve trace minimum-width viewport
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants